<script setup>
import { ref, onMounted } from "vue";
import storage from "@/storage/storage.js";
import { useRouter } from "vue-router";
import { logout } from "@/utils/https/api.js";
import { ElMessage, ElMessageBox } from "element-plus";
const router = useRouter();
let userInfo = ref({});

onMounted(() => {
  userInfo.value = JSON.parse(storage.getCookies("userInfo"));
});

let goPerCenter = () => {
  router.push({
    path: "/home/perCenter",
  });
};

let goHome = () => {
  router.push({
    path: "/home/homePage",
  });
};

let logOut = () => {
  logout({ session: userInfo.value.session }).then(() => {
    ElMessageBox.alert("确定要退出登录？", "警告", {
      confirmButtonText: "确定",
      callback: () => {
        storage.delCookies("userInfo");
        storage.delCookies("session");
        ElMessage.success("退出成功");
        setTimeout(() => {
          router.push({
            path: "/",
          });
        }, 1000);
      },
    });
  });
};
</script>

<template>
  <el-affix :offset="30" z-index="100">
    <div class="userInfo">
      <span>你好，{{ userInfo.userName }} </span>
      <span class="home" @click="goHome">首页</span>
      <span class="shu">|</span>
      <span class="pel" @click="goPerCenter">个人中心</span>
      <span class="shu">|</span>
      <span class="logOut" @click="logOut">退出</span>
    </div>
  </el-affix>
  <router-view class="routerView" />
</template>

<style scoped>
.userInfo {
  padding: 10px 20px;
  font-size: 12px;
  background: #ced6e0;
  text-align: right;
}
.shu {
  margin: 0 10px;
}
.logOut {
  color: #ea2027;
  cursor: pointer;
}
.pel {
  color: #2ecc71;
  cursor: pointer;
}
.home {
  margin-left: 10px;
  color: #2ecc71;
  cursor: pointer;
}
</style>
